<template>
  <div class="content">
    <div class="form">
      <div class="title">联系开发者方式</div>
      <el-alert title="备注：首次提交小程序审核前，需要填写以下任意一项联系方式" type="primary" />
      <el-form ref="ruleFormRef" :model="form" label-width="auto" style="margin-top: 20px;">
        <el-form-item label="手机号">
          <el-input v-model="form.contactPhone" placeholder="请输入您的手机号" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="微信号">
          <el-input v-model="form.contactWeixin" placeholder="请输入您的微信号" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="QQ号">
          <el-input v-model="form.contactQq" placeholder="请输入您的QQ号" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input v-model="form.contactEmail" placeholder="请输入您的邮箱地址" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 90px" @click="edit" v-if="!isEdit">
            编辑
          </el-button>
          <el-button type="primary" style="width: 90px" :loading="savaLoading" v-else @click="submitForm(ruleFormRef)">
            保存
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { getPrivacySetting, setPrivacySetting } from '@/api/ApiList'

const isEdit = ref(false)
const privacyVer = ref(1)
const savaLoading = ref(false)

interface RuleForm {
  contactEmail: string
  contactPhone: string
  contactQq: string
  contactWeixin: string
  noticeMethod?: string
}

const ruleFormRef = ref<FormInstance>()
const form = reactive<RuleForm>({
  contactEmail: '',
  contactPhone: '',
  contactQq: '',
  contactWeixin: '',
  noticeMethod: '小程序弹窗'
})


function edit() {
  isEdit.value = !isEdit.value
}

const settingList = reactive([
  {
    privacyKey: 'UserInfo',
    privacyText: '为了小程序更好的服务用户,开发者将在获取你的明示同意后，收集你的微信昵称、头像.'
  },
  {
    privacyKey: 'Location',
    privacyText: '为了推荐附近的门店,开发者将在获取你的明示同意后，收集你的位置信息.'
  },
  {
    privacyKey: 'PhoneNumber',
    privacyText:
      '为了小程序下单后联系用户进行取单操作,开发者将在获取你的明示同意后，收集你的手机号.'
  },
  {
    privacyKey: 'Address',
    privacyText:
      '为了小程序下单前选择自己的地址信息,开发者将在获取你的明示同意后，收集你的地址信息.'
  },
  {
    privacyKey: 'AlbumWriteOnly',
    privacyText: '为了小程序下载分享的海报写入相册,开发者将在获取你的明示同意后，写入你的相册.'
  },
  {
    privacyKey: 'Clipboard',
    privacyText:
      '为了小程序复制订单号需要读取你的剪切板,开发者将在获取你的明示同意后，读取你的剪切板信息.'
  },
  {
    privacyKey: 'Album',
    privacyText:
      '为了小程序上传选中的照片或者视频信息,开发者将在获取你的明示同意后，读取你选中的照片或视频信息.'
  }
])

async function getData() {
  const res = await getPrivacySetting({})
  if (res.code === '00000' && res.data) {
    form.contactEmail = res.data.ownerSetting.contactEmail
    form.contactPhone = res.data.ownerSetting.contactPhone
    form.contactQq = res.data.ownerSetting.contactQq
    form.contactWeixin = res.data.ownerSetting.contactWeixin

    if (
      res.data.ownerSetting.contactEmail === '' &&
      res.data.ownerSetting.contactPhone === '' &&
      res.data.ownerSetting.contactQq === '' &&
      res.data.ownerSetting.contactWeixin === ''
    ) {
      privacyVer.value = 2
    } else {
      privacyVer.value = 1
    }
  }
}

async function handleUpdateConfig() {
  try {
    savaLoading.value = true
    let obj = {
      privacyVer: privacyVer.value,
      ownerSetting: form,
      settingList: settingList
    }
    const res = await setPrivacySetting(obj)
    if (res.code === '00000') {
      isEdit.value = false
      ElMessage.success('编辑成功')
      await getData()
    } else {
      ElMessage.error(res.msg || '失败')
    }
  } catch (e) {
  } finally {
    savaLoading.value = false
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      handleUpdateConfig()
    } else {
    }
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.content {
  width: 100%;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .sub-title {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .set-item {
    margin-bottom: 10px;
  }

  .form {
    margin-top: 20px;
    width: 30%;
    color: #333;
  }
}
</style>
